import React, { useRef } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { ProTable, TableDropdown } from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Dropdown, Menu, Space, Tag } from 'antd';
import { useIntl } from '@umijs/max';
import { getRoleList } from '@/services/api/permissions/role';
import styles from './style.less';
import { buildParams, copyObj } from '@/utils/paramUtils';
import { tableSuppert } from '@/utils/response';
// 页面入口
const Role = () => {
  // 国际化
  const Intl = useIntl();
  const columns = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: Intl.formatMessage({
        id: 'permissions.column.role.name',
        defaultMessage: '角色名称',
      }),
      dataIndex: 'roleName',
      copyable: true,
      ellipsis: true,
    },
    {
      title: Intl.formatMessage({
        id: 'permissions.column.role.key',
        defaultMessage: '权限字符',
      }),
      dataIndex: 'roleKey',
      ellipsis: true,
    },
    {
      title: Intl.formatMessage({
        id: 'permissions.column.role.status',
        defaultMessage: '角色状态',
      }),
      dataIndex: 'status',
      filters: true,
      onFilter: true,
      ellipsis: true,
      valueType: 'select',
      valueEnum: {
        0: {
          text: '启用',
          status: 'Processing',
        },
        1: {
          text: '关闭',
          status: 'Error',
        },
      },
    },
    {
      title: Intl.formatMessage({
        id: 'basis.column.sorted',
        defaultMessage: '排序',
      }),
      sorter: true,
      dataIndex: 'roleSort',
      hideInSearch: true,
    },
    {
      title: Intl.formatMessage({
        id: 'basis.column.createTime',
        defaultMessage: '创建时间',
      }),
      key: 'showTime',
      dataIndex: 'createTime',
      valueType: 'date',
      sorter: true,
      hideInSearch: true,
    },
    {
      title: Intl.formatMessage({
        id: 'basis.column.createTime',
        defaultMessage: '创建时间',
      }),
      dataIndex: 'createTime',
      valueType: 'dateRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          return {
            beginTime: value[0],
            endTime: value[1],
          };
        },
      },
    },
    {
      title: Intl.formatMessage({
        id: 'pages.searchTable.titleOption',
        defaultMessage: '操作',
      }),
      valueType: 'option',
      key: 'option',
      render: (text, record, _, action) => [
        <a
          key="editable"
          onClick={() => {
            action?.startEditable?.(record.id);
          }}
        >
          {Intl.formatMessage({
            id: 'basis.column.editor',
            defaultMessage: '编辑',
          })}
        </a>,
        <a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
          {Intl.formatMessage({
            id: 'basis.column.delete',
            defaultMessage: '删除',
          })}
        </a>,
        <TableDropdown
          key="actionGroup"
          onSelect={() => action?.reload()}
          menus={[
            {
              key: 'authResource',
              name: Intl.formatMessage({
                id: 'permission.btn.auth.resource',
                defaultMessage: '授权资源',
              }),
            },
            {
              key: 'authRole',
              name: Intl.formatMessage({
                id: 'permission.btn.auth.user',
                defaultMessage: '授权用户',
              }),
            },
            {
              key: 'authPermission',
              name: Intl.formatMessage({
                id: 'permission.btn.auth.permission',
                defaultMessage: '授权权限',
              }),
            },
          ]}
        />,
      ],
    },
  ];
  // 请求数据
  const getList = async (param, sorter) => {
    // 为了解决重复发起请求问题
    console.log(sorter);
    let sort = copyObj(sorter);
    if (Object.keys(sort).length === 0) {
      sort.createTime = 'desc';
    }
    const data = await getRoleList(buildParams(param, sort)).then((res) => {
      return res.data;
    });
    return tableSuppert(data);
  };
  return (
    <PageContainer
      content={Intl.formatMessage({
        id: 'permissions.table.title',
        defaultMessage: '系统角色列表',
      })}
    >
      <ProTable
        columns={columns}
        // 发请求
        request={getList}
        columnsState={{
          persistenceKey: 'pro-table-singe-demos',
          persistenceType: 'localStorage',
          onChange(value) {
            console.log('value: ', value);
          },
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        pagination={{
          pageSize: 5,
          onChange: (page) => console.log(page),
        }}
        toolBarRender={() => [
          <Space key="space">
            <Button key="add" icon={<PlusOutlined />} type="primary">
              {Intl.formatMessage({ id: 'permissions.btn.add.role', defaultMessage: '添加角色' })}
            </Button>
          </Space>,
        ]}
      />
    </PageContainer>
  );
};

export default Role;
